<template>
  <!--表单-->
  <el-form :inline="true" :model="queryParam" class="demo-form-inline">
      <el-form-item label="药品名：">
        <el-input v-model="queryParam.medicineName" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="生产商：">
        <el-input v-model="queryParam.manufacturer" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selectPage">查询</el-button>
      </el-form-item>
  </el-form>
 <!-- 功能按钮 -->
  <div>
    <el-button  type="primary" @click="addMedicine">新增</el-button>
    <MedicineAdd 
      style="width: 700px;
      height: 500px" 
      v-model=isShowDialog
      @cancel="cancelFun" 
      @save = "saveData"
    >
    </MedicineAdd>
  </div>
  
  <!--表格-->
  <!--:data="tableData"   v-bind:data='tableData'-->
  <el-table :data="tableData" style="width: 100% "  max-height="600px" >
    <el-table-column prop="medicineName" label="药品名" width="200" />
    <el-table-column prop="purchasePrice" label="售价" width="100" />
    <el-table-column prop="specification" label="规格" width="200" />
    <el-table-column prop="unit" label="单位" width="100" />
    <el-table-column prop="manufacturer" label="生产厂商" width="200" />
    <el-table-column prop="minStock" label="最小库存" width="120" />
    <el-table-column prop="maxStock" label="最大库存" width="120" />
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleClick(scope.row.id)">
          删除
        </el-button>
        <el-button link type="primary" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div class="pagination-block">
    <el-pagination
      v-model:current-page= this.current
      v-model:page-size= this.pageSize
      :page-sizes="[10, 20, 50, 200]"
      :size=this.total
      :disabled="disabled"
      :background="background"
      layout="total,sizes, prev, pager, next"
      :total= this.total
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @prev-click = "upPage"
      @next-click = "newPage"
    />
  </div>
</template>

<script>
import myAxios from '@/axios/myAxios';
import MedicineAdd from './MedicineAdd.vue';
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  components: {
    MedicineAdd:MedicineAdd
  },
  data() {
        return {
            tableData: [],//表格数据
            pageNum: 1,
            pageSize: 10,
            current: 1,
            size :0,
            total: 0,
            pages:0,
            queryParam: {
              "medicineName": "",
              "manufacturer": ""
            },
           isShowDialog: false,
           //initFormData : {},
        };
    },

    methods: {
      getData() {
          var params = this.queryParam
          myAxios.post("/lhhMedicine/getMedicineList?pageNum="+ this.pageNum +"&pageSize="+ this.pageSize,params).then(response => { 
            var isSuccess = response.data.success;
            if (isSuccess) {
              var data = response.data.data;
              this.tableData = data.records;
              this.total = data.total;
              var size = data.size;
              var current = data.current;
              var pages = data.pages;
            }
            
          }).catch(error => {

          })
      },

      selectPage() {
        this.getData();
      },

      //添加对话框
      addMedicine() {
        this.isShowDialog = true;
      },

      cancelFun() { 
        this.isShowDialog = false;
      },

      //保存
      saveData(formData) {
        //子组件传递过来的表单数据
        myAxios.post("/lhhMedicine/addMedicine", formData).then((reposen => { 
          var data = reposen.data;
          if (data.success) {//保存成功

            ElMessage({ message: '添加成功', type: 'success' });
            this.isShowDialog = false;
          }
        })).catch((errow => {
            ElMessage.error('添加失败');
            this.isShowDialog = true;
        }))

      },

      //每页几条数据事件
      handleSizeChange(chageValue) {
        this.pageSize = chageValue;
        //再调用一次查询语句
        this.getData();

      },
      //上一页
      upPage(value) {
        this.pageNum = value - 1; 
        this.getData();
      },
      //下一页
      newPage(value) {
        this.pageNum = value + 1; 
        this.getData();
      },

      //改变当前页
      handleCurrentChange(value) { 
        this.pageNum = value; 
        this.getData();
      },

       handleClick(index) {
        if (index == "") {
          alert("参数不能为空！");
          return;
        }

        //消息提示框
        ElMessageBox.confirm('是否进行删除操作！','Warning',{
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
           }
        ).then(() => {
            myAxios.delete("/lhhMedicine/delMedicineById?id="+index).then((repeson) => {
              ElMessage({ type: 'success', message: '删除成功', }) 
              this.getData();
            })

        }).catch(() => { 
        })



      }
    },
    //生命周期函数，创建时，就加载数据
    created() {
        this.getData();
    },
};
</script>
<style>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.pagination-block{
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
}
</style>